<template>
	<view>
		<view class="header status_bar">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text">附近店铺</view>
		</view>
		<view class="clear_box"></view>

		<block v-for="(item, index) in address" :key="'address' + index">
			<view class="address_list">
				<view class="tick">
					<image :src="item.image" mode="scaleToFill" :data-img="item.image" @tap.stop="openPreviewImage"></image>
				</view>
				<view class="text_box">
					<view class="title">{{ item.name }}</view>
					<view class="name_box">
						<view class="name">简介:{{item.store_info}}</view>
					</view>
					<view class="name_box">
						<view class="name">起送价：￥{{item.starting_price}}</view>
					</view>
					<!-- <view class="name_box">
						<view class="name">配送费：￥{{item.shipping_price}}</view>
					</view> -->
					<view class="name_box">
						<view class="name">地址：{{item.address}}</view>
					</view>
				</view>
				<view class="icon iconfont icon-bianji" :data-url="'/pages/personalcenter/shop/manage?id='+item.id" @click="gotopage"></view>
				<view class="icon iconfont icon-shanchu" @click="delAddress" :data-id="item.id"></view>
			</view>
		</block>
		
		<view class="clear_box"></view>
		
		<view class="confirm" data-url="/pages/personalcenter/shop/manage" @click="gotopage">添加店铺</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			page:1,
			select: 0,
			address: [
				
			]
		};
	},
	onLoad(options) {
	  let that = this;
	},
	onShow() {
		let that = this;
		that.page = 1;
		that.getInfoData()
	},
	methods: {
		openPreviewImage(e) {
			let that = this;
			let img_ = e.currentTarget.dataset.img;
			//console.log(img_)
			uni.previewImage({
				urls: [img_],
				longPressActions: {					
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		getInfoData(){
			let that = this;
			that.Net._get('terminal/village_store', {per_page:'10',page:that.page}, res => {
				if(res.code == 200){
						//console.log(res)
						that.address = res.data.data.data;
				}
			});
		},
		backPage() {
			uni.navigateBack({});
		},
		gotopage(e) {
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url: url
			});
		},
		// setTickStyle(e) {
		// 	let that = this;
		// 	let index = e.currentTarget.dataset.index;
		// 	let id_ = e.currentTarget.dataset.id;
		// 	that.select = index;
		// 	that.Net._get('user/addresses/default/'+id_, {}, res => {
		// 	  if (res.code == 200) {
		// 	    //console.log(res)
		// 			that.getInfoData();
		// 	  } else if (res.code != 200) {
			    
		// 	  }
		// 	});
		// },
	  delAddress(e) {
	    var that = this;
	    let id = e.currentTarget.dataset.id;
	    uni.showModal({
	      title: '提示',
	      content: '是否删除',
	      success: function (res) {
	        if (res.confirm) {
	          that.Net._delete('terminal/village_store/'+id, {}, res => {
	            if (res.code == 200) {
	              that.Msg.Success('删除成功', res => {
	                that.getInfoData();
	              });
	            } else if (res.code != 200) {
	              that.Msg.Success(res.msg, res => {});
	            }
	          });
	        } else if (res.cancel) {
	          //console.log('用户点击取消');
	        }
	      }
	    });
	  },
		
	},
	onReachBottom() {
		var that = this;
		that.page++;
		that.Net._get('terminal/village_store', {per_page:'10',page:that.page}, res => {
			if (res.code == 200) {
				//console.log(res)
				if (res.data.data.data == '') {
					uni.showToast({
						title: '已经是最后一页了',
						duration: 2000,
						icon: 'none'
					});
				} else {
					that.address = that.address.concat(res.data.data.data); //将数据拼接在一起
				}
			} else if (res.code == 0) {
				that.Msg.Success(res.msg, res => {});
			}
			
		});
		
	},
};
</script>

<style>
page {
	padding-top: 4%;
}
.address_list {
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #f5f5f5;
	padding: 4%;
	display: flex;
}

.address_list .tick {
	width: 26vw;
	height: 26vw;
	margin-right: 3vw;
}

.address_list .tick image{
	width: 100%;
	height: 100%;
	border-radius: 2vw;
}

.address_list .icon {
	width: 8vw;
	font-size: 5vw;
	color: #666;
	text-align: right;
}

.address_list .text_box {
	flex: 1;
}

.address_list .text_box .title {
	font-size: 3.5vw;
	color: #333;
	font-weight: bold;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.address_list .text_box .name_box {
	display: flex;
	margin-top: 2vw;
}

.address_list .text_box .name_box .name {
	font-size: 3.2vw;
	color: #333;
}

.address_list .text_box .name_box .phone {
	font-size: 3.5vw;
	color: #666;
	margin-left: 4vw;
}

.address_list .text_box .name_box image{
	width: 18vw;
	height: 18vw;
	border-radius: 2vw;
}

.tickColor {
	color: #FF9822 !important;
}

.confirm{
	bottom: 3vw;
}
</style>
